<script setup>
import ModalBox from '@/components/ModalBox/ModalBox.vue'
import { reactive, ref, toRaw, inject, onMounted, computed, watch } from 'vue';
import { message } from 'ant-design-vue';
import { departmentEdit } from '@/apis/organizationsManaging/unitManaging'
import { Form } from 'ant-design-vue';
const useForm = Form.useForm;
const open = ref(false);
const formRef = ref();
const formState = reactive({
    id:"",
    cid: "",
    name: "",
    pid: "",
    tel: "",
    description: "",
});
const value = ref([]);
const { resetFields, validate, validateInfos } = useForm(
    formState,
    reactive({
        name: [{ required: true, message: '请填写公司名称', trigger: 'change', }],
        tel: [{ required: true, message: '请填写电话', trigger: 'change', }],
        cid: [{ required: true, message: '请填写所属公司', trigger: 'change', }],
    }),
);
const options = inject('companyTreeData')
const queryCompanyTreeList = inject('getCompanyTreeDatalist', Function, false);
const cascaderOptions = computed(() => {
    if (formState.cid) {
        let arr = options.value.filter(item => item.id == formState.cid)
        return arr[0].children;
    }
    return []
})
watch(open, (data) => {
    if (!data) {
        for (const key in formState) {
            formState[key] = ""
        }
    }
})
const handleOk = () => {
    validate()
        .then(res => {
            craeteEdit()
        })
        .catch(err => {
            console.log('error', err);
        });
}
const craeteEdit = () => {
    let obj = JSON.parse(JSON.stringify(formState))
    !obj.pid && (obj.pid = 0)
    !obj.cid && (obj.cid = 0)
    if (obj.pid != 0) {
        obj.pid.length > 1 ? (obj.pid = obj.pid[obj.pid.length - 1]) : (obj.pid = obj.pid[0]);
    }
    departmentEdit(obj).then(res => {
        if (res.code === 1) {
            queryCompanyTreeList();
            open.value = false
        } else {
            message.error(res.msg);
        }
    })
}
const handleCancel = () => {
    open.value = false
}

defineExpose({ open, formState })

</script>
<template>
    <modal-box v-if="open" :title="!formState.id ? '创建部门' : '编辑部门'" :isOpen="open" @ok="handleOk" @cancel="handleCancel" width="600px">
        <template #content>
            <div>
                <a-form ref="formRef" :model="formState" @finish="handleOk">
                    <a-form-item label="部门名称" v-bind="validateInfos.name">
                        <a-input v-model:value="formState.name" />
                    </a-form-item>
                    <a-form-item label="联系电话" v-bind="validateInfos.tel">
                        <a-input v-model:value="formState.tel" />
                    </a-form-item>
                    <a-form-item ref="name" label="所属公司" v-bind="validateInfos.cid">
                        <a-select ref="select" v-model:value="formState.cid" :allowClear="true" placeholder="请选择" @change="formState.pid=''">
                            <a-select-option v-for="item in options" :value="item.id">{{ item.title
                            }}</a-select-option>
                        </a-select>
                    </a-form-item>
                    <a-form-item label="所属部门">
                        <a-cascader v-model:value="formState.pid" :options="cascaderOptions"
                            :fieldNames="{ label: 'title', value: 'id', children: 'children' }" placeholder="请选择"
                            change-on-select />
                        <!-- <a-select ref="select" v-model:value="formState.pid" :allowClear="true">
                            <a-select-option :value="0">未知</a-select-option>
                            <a-select-option v-for="item in filiale" :value="item.id">{{ item.title }}</a-select-option>
                        </a-select> -->
                    </a-form-item>
                    <a-form-item ref="name" label="公司描述" class="description">
                        <a-textarea v-model:value="formState.description" placeholder="请填写公司描述" :rows="4" />
                    </a-form-item>
                </a-form>
            </div>
        </template>
    </modal-box>
</template>
<style lang='scss' scoped>
.description {
    width: 100% !important;
    margin-right: 0px !important;
}

:deep(.ant-form) {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

:deep(.ant-form-item) {
    width: calc((100% - 10px) / 2);
    margin-right: 10px;

    &:nth-child(2n) {
        margin-right: 0;
    }
}

:deep(.ant-form-item-label) {
    width: 80px;
}
</style>